<style type="text/css">
	.panel-price{		
		padding:15px 5px;
		/*background:#3a2313;*/		
		text-align:right;		
	}
	.panel-price .real-price{
		font-size:24pt;
		font-weight:bold;
		color:#990000;
	}
	.panel-price .before-dc{
		font-size:12pt;
		color:#ff9900;
		text-decoration:line-through;		
	}
</style>
<div class="panel-base">
	<div class="row-fluid">
		<div class="span9">
			<h1 class="page-title"><?php print $item['CAF_PDT_NAME']; ?></h1>
			<span><b>หมวดหมู่:</b> <?php print $item['CAF_PDT_CAT_NAME']; ?></span>
			<input type="hidden" id="pcode" value="<?php print $item['CAF_PDT_CODE']; ?>" />
		</div>
		<div class="span3">
			<div class="panel-price">
				<span class="real-price block">฿<?php printf('%.2f', $item['CAF_PDT_PRICE']); ?></span>
				<span class="before-dc block">฿<?php printf('%.2f', $item['CAF_PDT_DC']); ?></span>
			</div>
		</div>
	</div>
	<div class="row-fluid">
		<div class="addthis_toolbox addthis_default_style span7">
			<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
			<a class="addthis_button_tweet"></a>
		</div>
		<div class="span5 text-right">
			<input type="range" value="<?php print $user_rate; ?>" step="1" id="rate">
			<div class="rateit" data-rateit-min="0" data-rateit-max="5" data-rateit-backingfld="#rate"></div>
		</div>
	</div>
	<div>
		<div id="slider" class="flexslider">
			<ul class="slides">
			<?php for ($i=1; $i<count($item['CAF_PDT_IMG']); $i++): ?>
					<li><img src="<?php print $item['CAF_PDT_IMG'][$i]; ?>" style="height:300px;" /></li>	
			<?php endfor; ?>	
			</ul>
		</div>		
		<?php if (count($item['CAF_PDT_IMG']) > 0): ?>
			<div id="carousel" class="flexslider">
				<ul class="slides">
				<?php for ($i=1; $i<count($item['CAF_PDT_IMG']); $i++): ?>
					<li class="thumbnail" style="margin:0 1px"><img src="<?php print $item['CAF_PDT_IMG'][$i]; ?>" style="width:150px; height:80px;" /></li>	
				<?php endfor; ?>    
				</ul>
			</div>
		<?php endif; ?>
	</div>
	<div class="row-fluid">		
		<div class="span8">	
			<b>รายละเอียด</b><br />
			<?php print $item['CAF_PDT_DESC']; ?>			
		</div>
		<div class="span4">
			<h5>แบ่งปันให้เพื่อนของคุณ</h5>
			<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
				<a class="addthis_button_preferred_2"></a>
				<a class="addthis_button_preferred_1"></a>
				<a class="addthis_button_preferred_4"></a>				
			</div>
		</div>
	</div>
	<div class="fb-comments" style="margin-top:30px;" data-href="http://example.com" data-width="600" data-num-posts="7"></div>
</div>

<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-51359b6d6b837e66"></script>
<script type="text/javascript">
	(function(d, s, id) {
	  var js, fjs = d.getElementsByTagName(s)[0];
	  if (d.getElementById(id)) return;
	  js = d.createElement(s); js.id = id;
	  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=390661077691722";
	  fjs.parentNode.insertBefore(js, fjs);
	}(document, 'script', 'facebook-jssdk'));

	$(document).ready(function(){
		$('#slider').flexslider({
		    animation: "slide",
		    controlNav: false,
		    animationLoop: false,
		   	slideshow: false,
			sync: "#carousel"
		});
		$('#carousel').flexslider({
			animation: "slide",
			controlNav: false,
			animationLoop: false,
			slideshow: false,
			itemWidth: 150,
			itemHeight: 100,
			itemMargin: 5,
			asNavFor: '#slider'
		});			   
			  	
		$('.fb-comments').attr('data-href', document.URL);
		$('.rateit').bind('rated reset', function(e, value){
			
			$.ajax({             
				url: '<?php print base_url() . $cafe_name . '/product/view/ajax_rate'; ?>',        
				data: { pc : $('#pcode').val(), v: $(this).rateit('value') },             
				type: 'POST',      
				success: function(output){				
					alert(output);					              
				},
				error: function (jxhr, msg, err) {  
					$('#response').append('<li style="color:red">' + msg + '</li>');             
				}         
			});
		});	
		 var tooltipvalues = ['แย่', 'อ่อน', 'พอใช้', 'ดี', 'ดีมาก'];
	    $(".rateit").bind('over', function (event, value) { $(this).attr('title', tooltipvalues[value-1]); });	
	});
</script>